Typography task 1:Type Expression & Text Formatting

4 April 2023 - 2 May 2023/ Week 1 - Week 5

Simon Ko Jing Liang 0364359
Typography / Bachelor of Design (Honours) in Creative Media
Task 1 Type Expression & Text Formatting

LECTURES

Week 1

Typo 1 Development

Figure 1.1

The development of letterforms can be traced back to the Phoenicians. The Phoenicians developed an alphabet of 22 letters, which they used primarily for trading and record-keeping. At their core, uppercase forms are simple combination of straight lines and pierce of circles.

Figure 1.2

The Greeks changed the direction of writing. They developed boustrophedon(how the ox ploughs) which meant that the lines of text read from right to left and left to right. The Greeks also changed the orientation of the letterforms.

Figure 1.3

Certain qualities of their(Etruscan and then the Roman) strokes a change in weight from vertical to horizontal ,, a broadening of the stroke at start and finish -- carried over into the carved letterforms.

Figure 1.4 Early letterform development: Phoenician to Roman

Figure 1.5

Square capitals: a style of lettering characterized by square, angular shapes and uniform letter height, commonly used in ancient Rome for inscriptions, official documents, and manuscripts.

Figure 1.6

Rustic capitals: also known as capitalis rustica, is a style of lettering characterized by its rounded, simple and informal appearance, commonly used in ancient Rome for informal documents, such as personal letters and graffiti.

Figure 1.7

Roman cursive: also known as Latin cursive, is a handwriting style used in ancient Rome for everyday writing, characterized by its flowing and connected strokes, and often written with a quill or reed pen.

Figure 1.8

Uncials: a style of writing in which the letters are rounded and written with a broad-nibbed pen, which was commonly used in Europe from the 4th to 8th centuries, and was often used for religious texts and manuscripts.

Figure 1.9

Half uncials: a style of handwriting used in Europe from the 6th to 9th centuries, characterized by its rounded letters that are smaller than Uncials and with some letters having ascenders and descenders, and was often used for copying religious and classical texts.

Figure 1.10

Caroline minuscule: a small, compact style of medieval handwriting known for its legibility and clarity, which was developed at the court of Charlemagne.

Figure 1.11

Blackletter : a style of Gothic script that was commonly used in Europe during the Middle Ages, while Gutenberg type, also known as Old Style type, was developed in the 15th century and is characterized by its more legible and uniform design.

Figure 1.12

1450 Blackletter: as known as Textura or Gothic script, is a dense, angular, and ornate style of calligraphic writing commonly used in Europe from the 12th to the 16th century.

Figure 1.13

1475 Old Style: a typeface that originated in Italy and is characterized by its lowercase letters with angled serifs, bracketed serifs on uppercase letters, and an overall classical and elegant appearance.

Figure 1.14

1500 Italic: a typeface that originated in Italy and is characterized by its slanted and flowing letterforms, which were designed to emulate the handwriting of the time and create a more legible and elegant typeface for printed text.

Figure 1.15

1550 Script: a style of handwriting or typeface that features flowing, cursive letterforms, often used for decorative or ornamental purposes in documents and publications during the Renaissance period.

Figure 1.16

1750 Transitional : a style of typeface that emerged in the mid-18th century, characterized by a more vertical axis, sharper serifs, and increased contrast between thick and thin strokes, representing a transition between the old style and modern typefaces.

Figure 1.17

1775 Modern: a style of typeface that emerged in the late 18th century, characterized by a vertical axis, thin hairline serifs, and a high contrast between thick and thin strokes.

Figure 1.18

1825 Square Serif /Slab Serif :style of typeface that emerged in the early 19th century, characterized by its bold, rectangular serifs, and its overall squared appearance, lending it a modern and clean look.

Figure 1.19

1900 Sans Serif : a style of typeface that emerged in the early 20th century, characterized by its clean, simple lines without serifs, lending it a modern, sleek and legible appearance, often used in both print and digital media.

Figure 1.20

1990 serif/ sans serif : This type enlarges the notion of a family of typefaces to include both serif and sans serif alphabets .

Week 2

Typo 2 Basic

Figure 2.1

Baseline: The imaginary line the visual base of the letterforms.

Median: The imaginary line defining the X- height of letterforms.

X-Height: The height in any typefaces of the lowercase 'x'.

Figure 2.2

Stroke :Any line that defines the basic letterform.

Figure 2.3

Apex/Vertex : The point created by joining two diagonal stems(apex above and vertex below).

Figure 2.4

Arm Short strokes of the stems of the letterforms, either horizontal (E , F, L) or inclined upward ( K,Y).

Figure 2.5

Ascender: The portion of the stem of a lowercase letterform that projects above the median.

Figure 2.6

Barb: The half-serif finish om some curved stroke.

Figure 2.7

Bowl: The rounded form thar describes a counter. The bowl may be either open or closed.

Figure 2.8

Bracket: The transition between the serif and the stem.

Figure 2.9

Cross bar: The horizontal stroke in a letterform that joins two stems together.

Figure 2.10

Cross stroke: The horizontal stroke in a letterform that joins two stems together.

Figure 2.11

Crotch: The interior space where two strokes meet.

Figure 2.12

Ear: The stroke extending out from the main stem or body of the letterform.

Figure 2.13

EmE/n: Most often used to describe em/en space and em/en dashes.

Figure 2.14

Finial: The rounded non-serif terminal to a stroke.

Figure 2.15

Ligature: The character formed by the combination of two or more letterforms.

Figure 2.16

Link: The stroke that connects the bowl and the loop of a lowercase G.

Figure 2.17

Serif: The right angled or oblique foot at the end of the stroke.

Figure 2.18

Spine: The curved stem of the S.

Figure 2.19

Spur: The extension the articulates the junction of the curved and rectilinear stroke.

Figure 2.20

Stress: The orientation of the letterform, indicated by the thin stroke in round forms.

Figure 2.21

Swash: The flourish that extends the stroke of the letterform.

Figure 2.22

Terminal: The self-contained finish of a stroke without a serif.

Figure 2.23

Uppercase: Capital letters, including certain accented vowels, the c cedilla and n tilde, and the a/e ligatures.

Figure 2.24

lowercase: Lowercase letters include the same character as uppercase.

Figure 2.25

Uppercase Numerals: Also called lining figures, these numerals are the same height as uppercase letters and are all set to the same kerning width.

Figure 2.26

Lowercase numerals: As known as old style figures or texture figures, these numerals are set to x-height with ascenders and descenders.

Week 3 Text

Figure 3.1

Kerning :the spacing between individual letters or characters

Figure 3.2

Upper right corner is normal tracking. The lower left corner is tight tracking and the lower right corner is loose tracking.

Figure 3.3

The examples of normal tracking, tight tracking and loose tracking

Figure 3.4

Flush left: The most common and widely used type of horizontal alignment.

Figure 3.5

Centered: Text is aligned to neither the left nor right margin; there is an even gap on each side of each line.

Figure 3.6

Flush right :Text is aligned along the right margin or gutter, also known as right-aligned, ragged left or ranged right.

Figure 3.7

Justified: The text can be possible to have the text aligned to both left and right.

Figure 3.8

Type size:Text type should be large enough to be read easily at arm length.

Leading : Text that is set too tightly encourages vertical eye movement; the space between adjacent lines of type.

Line length: The width of a block of typeset text, usually measured in units of length like inches or points or in characters per line.

Figure 3.9

A type specimen is a publication, often in pamphlet form, that shows the range of a particular typeface in use.

Compositional requirement: Text should be create a field that can occupy a page or a screen.

Week 4

Widows and orphans

Figure 4.1

A widow is a short line of type left alone at the end of a column of text.

An orphan is a short line of type left alone at the start of new column.

Highlighting Text

Figure 4.2

Highlighting text means emphasizing or marking a specific portion of a text using color or shading to draw attention to important information, indicate changes or edits, or organize information. It is a common practice in various fields to help readers quickly identify key points and important details within a larger body of text.

Figure 4.3

The sans serif font(Univers) has been reduced by .5 to match the x-height of the serif typeface .8 not equal to 7.5

Figure 4.4

When highlighting text by placing a field of colour at the back of the text , maintaining the left reading axis of the text ensures readability is at its best.

Figure 4.5

It is necessary to place certain typographic elements outside the left margin of a column of type t maintain a strong reading axis.

Figure 4.6

Quotation marks, like bullets can create a clear indent , braking the left reading axis. Comparer the indented quote at the top with the extended quote at the bottom.

Headline within text

Figure 4.7

A head indicates a clear break between the topics within a section.

Figure 4.8

The B head is subordinate to A head. B heads indicate a new supporting argument or example for the topic at hand.As such they should not interrupt the text as strongly as A heads do.

Figure 4.9

The C heads, highlights specific facets of material within B head text. They not materially interrupt the flow of reading. C heads in this configuration are followed by at least em space for visual separation.

Figure 4.10

Putting together a sequence of subheads= hierarchy.

Figure 4.11

Cross aligning headlines and captions with text type reinforces the architectural sense of the page-- the structure--while articulating the complimentary vertical rhythms.

Week 5 Understanding

FIgure 5.1

The uppercase letterforms below is not symmetrical. It is east to see the two different stroke weights of the Baskerville stroke from (below). Each bracket connecting the serif to the stem has unique arc.

Figure 5.2

The uppercase letter forms may appear symmetrical, but a close examination shows that the width of the left slope is thinner than the right stroke.Both Baskerville and Univers(below) demonstrate the meticulous care a type designer takes to create letterforms that are both internally harmonious and individually expressive.

Figure 5.3

The complexity of each individual letterform is neatly demonstrated by examining the lowercase 'a' of two seemingly similar sans serif typefaces-- Helvetica and Univers.A comparison of how the stems of the letterforms finish and how the bowls meet the stems quickly reveals the palpable difference in character between the two.

Figure 5.4

The x-height describe the size of htte lowercase letterforms and should keep in mind that curved strokes such as in 's', must rise above the median in order to appear to be the same size as the vertical and horizontal strokes they adjoin.

Figure 5.5

Recognizing specific letterforms ios developing a sensitivity to the counterform(or counter)--the space describes and often contained by the strokes of the forms.

The latter is particularly and important concept when working with letterforms like lowercase 'r'.

Figure 5.6

The examinations provide a good feel for how the balance between form and counter is achieved and a palpable sense of letterform's unique characteristics. It also gives a glimpse into the process of letter making.

Figure 5.7

Contrast is the most powerful dynamic in design.

The simple contrasts produces numerous variations: small +organic/ large + machined..

Figure 5.8

Week 6

Figure 6.1

Different medium refers to the weight or thickness of a typeface, which can affect the appearance and readability of the text. Other typographic mediums that can be used to enhance the design of a text include font size, line spacing, font style, color, and alignment. By using these mediums, designers can create visually appealing and effective designs that communicate information and convey a specific message or mood.

Type for print

A good typeface for print-- Calson, Garammond, Baskerville are the most common typefaces that is used for print.Their characteristic are elegant and intellectual but also highly readable when set at small font size.

They are versatile , easy to digest classic typeface which has a neutrality and versatility that makes typesetting with it a breeze.

Type for Screen

Typefaces intended for use on the web are optimized and often modified to enhance readability ad performance onscreen in variety of digital environments.

Adjustment-- especially for typefaces intended for smaller size--is more spacing.

Hyperactive Link/ hyperlink

A hyperactive link or hyperlink is a clickable element in an electronic document that allows users to access another web page or a different section of the same page. They are commonly used on the internet and in electronic documents such as PDFs and e-books to provide easy navigation and reference related content. Hyperlinks can be inserted manually or automatically and can be customized to include additional information to provide context for the user.

Figure 6.2

Font size for screen

Font size for screens refers to the size of text displayed on electronic screens such as computer monitors, mobile phones, and tablets. A font size of 16 pixels or above is recommended for body text on screens, but the optimal size may vary depending on factors such as screen resolution, viewing distance, and target audience. Other typographic factors such as line spacing, font style, and contrast should also be considered when designing for screen use to ensure readability and legibility.

Figure 6.3

System Fonts for Screen/ Web Safe Fonts

System fonts for screens or web-safe fonts are commonly available fonts on most operating systems and web browsers. They are considered safe because they are widely available and are less likely to cause cross-browser compatibility or licensing issues. Common examples include Arial, Verdana, Times New Roman, and Helvetica. Using system fonts or web-safe fonts can ensure consistent design across different devices and browsers, but custom fonts can also be used through embedding technologies such as CSS or JavaScript for greater flexibility and creativity.

Static vs motion

Figure 6.4

Static typography

Static typography refers to the use of fixed, unchanging typographic elements in a design or layout. In static typography, the typography is predetermined and does not change or respond to user interaction or input.

Static typography can be effective for conveying information in a clear and concise manner, as it allows the designer to carefully control the layout and hierarchy of information. However, it may not be well-suited for dynamic or interactive designs that require flexibility and adaptability, such as websites or mobile applications. In these cases, dynamic typography or responsive typography may be more appropriate.

Motion typography

Motion typography, also known as kinetic typography, refers to the use of moving or animated text in digital media such as videos, films, and websites. In motion typography, the text is not static but moves and changes over time, often in synchronization with other elements of the design or to convey a particular message or emotion.

Motion typography requires specialized design and technical skills, as well as an understanding of the principles of animation and timing. It can be a powerful tool for visual storytelling and branding, but should be used thoughtfully and appropriately to avoid overwhelming or distracting the viewer.

INSTRUCTIONS

Task 1 Exercise - Type Expression

1. Sketches

figure1.0 sketches of DISSIPATE

(13 April 2023)

Dissipate means to scatter or disperse something in a way that makes it difficult to gather again, to waste or squander resources, or to gradually disappear or dissolve into the air or into a larger substance so I use dots, transparent and cut to make the font disappear in three ways to present the word "dissipate".

figure1.1 sketches of FREEDOM

(13 April 2023)

The sketch idea in the upper left corner comes from the fact that the dove symbolizes freedom and the broken rope in the middle also represents freedom. The idea in the upper right corner is associated with an airplane so I slowly raised the word raised from the bottom and matched it with an airplane soaring to the sky. The bottom of the design is the balloon raised to the sky with the two E .

figure1.2 sketches of SICK and WATER

(15 April 2023)

The first idea of WATER is to make the word and water drop merge and the middle one is the water drop merge with the letter A .The last idea of the water is to make the word "water" has a small wave.

The design of the first SICK is to use C as a bed and the patient rests on it. The other SICK is make the word vertical and change the angle of I and C to make them looks like an unhappy expression. The last design of SICK is still make the word vertical and make l word as a person vomits.

Digitisation

Figure 1.3 Digitization attempt

(18 April 2023)

Figure 1.4 Digitization attempt

(20 April 2023)

Figure 1.5 Digitization attempt

(20 April 2023)

Final Type Expression

Figure 1.6 Final artwork
(21 April 2023)

GIF animated expression

Figure 1.7 GIF animated expression attempt
(23 April 2023)

My GIF animated expression idea is to use the two Es in the middle of "freedom" to go up like a balloon and then the letters next to the E word also go up a little bit but they don't have a balloon to go up so they fall down again.

Figure 1.8 The progress of GIF type expression

Final GIF animated expression

Figure 1.9 Final artwork of GIF
(23 April 2023)

Task 1 Text formatting

Figure 1.2.1 10 fonts of text formatting (25 April 2023)

Figure 1.2.2 (25 April 2023)

The idea is comes from the habit of reading from left to right when people read, so the title and subtitle are placed on the upper left. Then put the content below the title, and then also put some text content on the right part to balance with the left part. Finally, put the picture on the upper right to set off the overall effect.

Figure 1.2.3 Final output of first design

(25 April 2023)

Fonts:Gill Sans Std

Font size:12 pt

Leading:11 pt

Tracking: -9

Paragraph spacing:56

Alignment: Align left

Figure 1.2.4 (26 April 2023)

First, I divided the content into four parts as shown in the figure. After completing the details (fonts, leading, tracking...), I put the title and subtitle in the left middle and because the right middle is too empty, I put pictures related to the text so that the overall view is not strange.

Figure 1.2.5 Final output of second design

(26 April 2023)

Fonts:Futura Std Book(Text), ITC Garamond Std (Title & subtitle)

Font size:10 pt

Leading:12pt

Tracking: -10

Paragraph spacing:54

Alignment: Align left

Figure 1.2.6 Final output of Third design

(30 April 2023)

I put the text from the top of right until the bottom of left.The word 'helvetica' rotated to 90 degree and the subtitle put below the title word 'I AM'.

Font size:12pt

Leading:14 pt

Tracking: -25

Paragraph spacing: 55

Alignment: Justify align left

Final Artwork

Figure 1.2.7 Outline view of artwork (30 April 2023)

Figure 1.2.8 Final output

(30 April 2023)

Feedback

Week 1 - absent

Week 2 - Finish the type expression and digitize them

Week 3 - Upload the e-portfolio. Started to brief about GIF animated expression.

Week 4 - explain the details of GIF animated expression and do the adjustment

Week 5 - If the text is divided into left and right parts, the distance between them cannot be too close.

Reflection

Experience

As I delved into its world, I realized its profound impact on written language.Through creating various type expressions, I realized the expressive power of typography and its ability to evoke emotions and capture attention. The process allowed me to experiment with different forms, sizes, and gradients, enabling me to communicate ideas in a visually engaging and dynamic manner. In addition, delving into text formatting provided me with a hands-on understanding of its significance in shaping the reading experience.

Observation

During my exploration of type expression and text formatting, I made several key observations. Firstly, I noticed how the careful selection of font sizes, weights, and spacing played a crucial role in establishing a visual hierarchy and guiding the reader's flow of attention. It became evident that these elements could direct the reader's gaze towards important headings, emphasize key information, and facilitate comprehension. Secondly, I observed that text formatting, when done thoughtfully, created a harmonious balance between form and function. By enhancing the aesthetic appeal of the content, it improved readability and overall communication of the message.

Findings

I found that type expression and text formatting are not merely aesthetic considerations but powerful tools that influence how content is perceived and understood. The expressive nature of typography allows for effective communication, capturing the audience's attention and conveying emotions. Then I realized that text formatting is instrumental in guiding the reader's reading experience, creating a seamless flow of information and enhancing comprehension. The deliberate choices made in typography and formatting have a profound impact on the audience's engagement and understanding of the content.

Search This Blog

Simon Ko Jing Liang (0364359)

Typography task 1:Type Expression & Text Formatting